import React from 'react'
import styled from 'styled-components'

import Flex from '../components/Flex'
import Config from '../utils/config'
import Color from '../components/Color'

import { GradientButton } from '../components/Button'
import Icon from '../components/Icon'
import { RotateIcon } from '../containers/common'
import FileIcon from '../components/Icon/file.svg'
import BackIcon from '../components/Icon/back.svg'
import SaveIcon from '../components/Icon/save.svg'
import SaveSuccIcon from '../components/Icon/save-succ.svg'
import SaveFailIcon from '../components/Icon/save-fail.svg'
import SaveActiveIcon from '../components/Icon/saving.svg'
import PublishIcon from '../components/Icon/publish.svg'

const Gap = styled.span`
    height: 20px;
    border-left: 1px solid white;
    opacity: 0.6;
`
const Container = styled(Flex)`
    height: ${Config.headerHeight}px;
    font-size: 15px !important;
`
const ToolBox = styled(Flex)`
    height: ${Config.headerHeight}px;

    color: white;
    padding: 0 10px;
    cursor: pointer;
    &:hover {
        background-color: rgba(0, 0, 0, 0.4);
    }
`
const ToolArrowBox = styled(ToolBox)`
    position: relative;
    padding: 0 16px;
    &:after {
        position: absolute;
        top: 44%;
        right: 12px;
        background: white;
        content: '';
        width: 10px;
        height: 10px;
        clip-path: polygon(0% 0%, 100% 0%, 50% 64%);
    }
    &:hover:after {
        clip-path: polygon(0% 64%, 50% 0%, 100% 64%);
    }
    &:hover > .menu-items {
        display: block;
    }
`
export const ToolButton = styled(GradientButton)`
    display: flex;
    align-items: center;

    height: 30px;
    border-radius: 12.7px;
    color: white;
    padding: 0 8px;
    margin: 0 10px;
`
const ProjectNameInput = styled.input`
    height: 28px;
    width: 160px;
    border: none;
    outline: none;
    padding: 0 0 0 10px;
    margin: 0 10px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    box-shadow: 0px -1px 2px #999 inset, 0px 1px 2px #999 inset;
`

const MenuItems = styled(Flex).attrs({
    className: 'menu-items',
})`
    position: absolute;
    top: ${Config.headerHeight}px;
    left: 0;

    width: 120%;
    display: none;

    color: black;
    letter-spacing: 2px;
    background-color: white;
`

const MenuItem = styled(Flex)`
    padding: 8px 48px 8px 18px;
    &:hover {
        color: white;
        background: ${Color.secondary};
    }
`
const SaveBtnInfo = {
    save: {
        icon: SaveIcon,
        text: '保存作品',
    },
    saving: {
        icon: SaveActiveIcon,
        text: '保存中...',
    },
    success: {
        icon: SaveSuccIcon,
        text: '保存成功',
    },
    error: {
        icon: SaveFailIcon,
        text: '保存失误',
    },
}
const HeaderTool = props => {
    return (
        <Container align="center" justify="space-between">
            <ToolBox align="center" justify="space-between">
                <Icon size={18} src={BackIcon} />
            </ToolBox>
            <Gap />
            <ToolArrowBox align="center" justify="space-between">
                <Icon size={16} src={FileIcon} />
                &nbsp;&nbsp;文件&nbsp;&nbsp;&nbsp;
                <MenuItems column="column">
                    <MenuItem onClick={props.openProject}>打开</MenuItem>
                    <MenuItem onClick={props.onNewProject}>新建</MenuItem>
                    <MenuItem onClick={props.onSaveAsProject}>另存为</MenuItem>
                </MenuItems>
            </ToolArrowBox>
            <Gap />
            <ToolButton
                minWidth="100px"
                hovered={props.saveStatus === 'save' ? false : true}
                onClick={props.onSaveProject}
            >
                {props.saveStatus === 'saving' ? (
                    <RotateIcon
                        size={16}
                        src={SaveBtnInfo[props.saveStatus].icon}
                    />
                ) : (
                    <Icon size={16} src={SaveBtnInfo[props.saveStatus].icon} />
                )}
                &nbsp;{SaveBtnInfo[props.saveStatus].text}
            </ToolButton>
            <Gap />
            <ProjectNameInput
                placeholder="作品名称"
                value={props.projectName}
                onChange={props.changeProjectName}
            />
            <ToolButton onClick={props.openPublish}>
                <Icon size={16} src={PublishIcon} />
                &nbsp;发布作品
            </ToolButton>
        </Container>
    )
}

export default HeaderTool



// WEBPACK FOOTER //
// ./src/containers/HeaderTool.js